<!DOCTYPE HTML>
<html lang="zh-cn">
 
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width,initial-scale=1.0" name="viewport">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <title>系统管理</title>






    <!--bootstrap-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="assets/css/bootstrap-theme.min.css"/>
    <!--ie10-->
    <link rel="stylesheet" href="assets/css/ie10-viewport-bug-workaround.css"/>
    <!--modal-->
    <link rel="stylesheet" href="assets/css/modal.css"/>
    <!--sidebar-->
    <link rel="stylesheet" href="assets/plugins/sidebar/css/jquery.mCustomScrollbar.min.css"/>
    <link rel="stylesheet" href="assets/plugins/sidebar/css/custom.css"/>
    <!--toastr-->
    <link rel="stylesheet" href="assets/plugins/toastr/css/toastr.min.css"/>
    <link rel="stylesheet" href="assets/plugins/toastr/css/toastr-reset.css"/>
    <!--font-awesome-->
    <link rel="stylesheet" href="assets/css/font-awesome-4.7.0/css/font-awesome.min.css"/>

    <link rel="stylesheet" href="assets/main.css"/>

    <script src="assets/js/jquery-3.1.1.min.js"></script>
    <!--bootstrap-->
    <script src="assets/js/bootstrap.min.js"></script>
    <!--ie10-->
    <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
    <!--paginator-->
    <script src="assets/js/bootstrap-paginator.js"></script>








  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">

</head>
 
<body>
  <div class="container panel panel-default" id="main">
    <div class="form-group">
    <div class="panel-heading">
        <a  role="button" class="btn btn-primary"><i class="fa fa-plus"></i> 新增</a>
         <a  role="button" class="btn btn-primary"><i class="fa fa-plus"></i> 修改</a>
         <a  role="button" class="btn btn-primary"><i class="fa fa-plus"></i> 删除</a>
    </div>
    
</div>
    <table id="table" style="width:50%"></table>
  </div>




<div class="panel panel-default" id="modelFrom" style="">
   <div class="panel-heading">
    新增
   </div> 
   <form class="form-horizontal">
    <div class="form-group">
     <div class="col-sm-2 control-label">
      类型
     </div> 
     <label class="radio-inline"><input type="radio" name="type" value="0" /> 目录 </label> 
     <label class="radio-inline"><input type="radio" checked="" name="type" value="1" /> 菜单 </label> 
     <label class="radio-inline"><input type="radio" name="type" value="2" /> 按钮 </label>
    </div> 


    <!-- fsfdsdf -->
    <div class="form-group">
     <div class="col-sm-2 control-label">
      菜单名称
     </div> 
     <div class="col-sm-10">
      <input type="text" name="name" placeholder="菜单名称或按钮名称" class="form-control" />
     </div>
    </div> 
    <div class="form-group">
     <div class="col-sm-2 control-label">
      上级菜单
     </div> 
     <div class="col-sm-10">
      <input type="text" name="parent_id" readonly="readonly" placeholder="一级菜单" class="form-control" style="cursor: pointer;" />
     </div>
    </div> 

<div id="radio1">


    <div class="form-group">
     <div class="col-sm-2 control-label">
      菜单URL
     </div> 
     <div class="col-sm-10">
      <input type="text" name="url" placeholder="菜单URL" class="form-control" />
     </div>
    </div> 
    <div class="form-group">
     <div class="col-sm-2 control-label">
      授权标识
     </div> 
     <div class="col-sm-10">
      <input type="text" name="perms" placeholder="多个用逗号分隔，如：user:list,user:create" class="form-control" />
     </div>
    </div> 
    <div class="form-group">
     <div class="col-sm-2 control-label">
      排序号
     </div> 
     <div class="col-sm-10">
      <input type="number" name="order_num" placeholder="排序号" class="form-control" />
     </div>
    </div> 
    <div class="form-group">
     <div class="col-sm-2 control-label">
      图标
     </div> 
     <div class="col-sm-10">
      <input type="text" name="icon" placeholder="菜单图标" class="form-control" /> 
      <code style="margin-top: 4px; display: block;">获取图标：http://fontawesome.io/icons/</code>
     </div>
    </div> 


</div>

<div id="radio0">

    <div class="form-group">
     <div class="col-sm-2 control-label">
      排序号
     </div> 
     <div class="col-sm-10">
      <input type="number" name="order_num" placeholder="排序号" class="form-control" />
     </div>
    </div> 
    <div class="form-group">
     <div class="col-sm-2 control-label">
      图标
     </div> 
     <div class="col-sm-10">
      <input type="text" name="icon" placeholder="菜单图标" class="form-control" /> 
      <code style="margin-top: 4px; display: block;">获取图标：http://fontawesome.io/icons/</code>
     </div>
    </div> 


</div>
<div id="radio2">

  <div class="form-group">
     <div class="col-sm-2 control-label">
      授权标识
     </div> 
     <div class="col-sm-10">
      <input type="text" name="perms" placeholder="多个用逗号分隔，如：user:list,user:create" class="form-control" />
     </div>
    </div> 


</div>

  <!-- sadasdasdasd -->
    <div class="form-group">
     <div class="col-sm-2 control-label"></div> 
     <input type="button" value="确定" class="btn btn-primary" /> &nbsp;&nbsp;
     <input type="button" value="返回" class="btn btn-warning" />
    </div>
   </form>
  </div>

</body>
<script src="assets/plugins/sidebar/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="assets/plugins/sidebar/js/custom.js"></script>
<!--Velocity是一个简单易用、高性能、功能丰富的轻量级JS动画库-->
<script src="assets/js/velocity.min.js"></script>
<script src="assets/js/velocity.ui.min.js"></script>
<!--toastr-->
<script src="assets/plugins/toastr/js/toastr.min.js"></script>

<script src="assets/main.js"></script>

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>


<script type="text/javascript">

  var $table = $('#table');
  var data = JSON.parse('[{"menu_id":1,"parent_id":0,"name":"系统管理","icon":"icon","type":0,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"},{"menu_id":2,"parent_id":0,"name":"字典管理","icon":"icon","type":1,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"},{"menu_id":20,"parent_id":1,"name":"新增系统","icon":"icon","type":3,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"},{"menu_id":21,"parent_id":1,"name":"编辑系统","icon":"icon","type":3,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"},{"menu_id":22,"parent_id":1,"name":"删除系统","icon":"icon","type":3,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"},{"menu_id":33,"parent_id":2,"name":"系统环境","icon":"icon","type":3,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"}]')
  $(function() {

    $("#modelFrom").hide();
   

$("a[role='button']").on('click',function(){
  $("#modelFrom").show();
  $('#main').hide();
});

$("input[type='button']").on('click',function(){
  $("#modelFrom").hide();
  $('#main').show();
});
// 增加 修改 事件
    var radioValue1=$("input[type='radio']:checked").val();
        $('#radio0').hide();
        $('#radio1').hide();
        $('#radio2').hide();
        var id="#radio"+radioValue1;
        $(id).show();
      //类型选择事件
      $("input[type='radio']").on('click',function(value){
        $('#radio0').hide();
        $('#radio1').hide();
        $('#radio2').hide();
        var radioValue=value.target.defaultValue;
        var id="#radio"+radioValue;
          $(id).show();
  
      });

// 增加 修改 事件

    $table.bootstrapTable({
      data:data, 
      dataType:'jsonp',
      columns: [
        {
          field: 'check',
          checkbox: true,
          radio:true
        },
        {
          field:'menu_id',
          title:'菜单ID'
        },
        {
          field: 'name',
          title: '菜单名称'
        },
        {
          field:'icon',
          title:'图标',
          formatter:'iconFormatter'
        },
        {
          field:'type',
          title:'类型',
          formatter:'typeFormatter'
        },
        {
          sortable: true,
          field:'order_num',
          title:'排序号'
        },
        {
          field:'url',
          title:'菜单URL'
        },
        {
          field:'perms',
          title:'授权标识'
        },
      ],
      idField: 'menu_id',//排序id 如不设默认不显示父子级
      treeShowField: 'name',
      parentIdField: 'parent_id',
      singleSelect:true,//单选
       height: $(window).height()/2,//自定义高度
        onCheck:function(row){
        var datas = $table.bootstrapTable('getData');
        console.log(row.menu_id);
        },




      onResetView: function(data) {
        // jquery.treegrid.js
        $table.treegrid({
           initialState: 'collapsed',//设置开闭
          treeColumn: 1,//指明第几列数据改为树形
          onChange: function() {
            $table.bootstrapTable('resetWidth');
          }
        });
      },
    });
  });
  //格式化类型 0：目录   1：菜单   2：按钮'
  function typeFormatter(value,row,index){
    if (value===0) {
      return '<span class="label label-primary">目录</span>';
    }else if(value===1){
      return'<span class="label label-success">菜单</span>';
    }else{
      return'<span class="label label-warning">按钮</span>';
    }
  }
  //格式化图标
  function iconFormatter(value,row,index){
    return '<i class="glyphicon glyphicon-user"></i>';
  }
  
</script>
</html>
